import React, { Component } from 'react'
import { Table, Popconfirm } from 'antd';
// import axios from 'axios'
export class Tablebox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // 表头
            columns: [
                {
                    title: '商品',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '价格',
                    dataIndex: 'price',
                    key: 'price',
                },
                {
                    title: '商品',
                    dataIndex: 'id',
                    key: 'id',
                },
                {
                    title: '操作',
                    dataIndex: 'del',
                    key: 'del',
                    render: (text, record) =>
                        this.state.dataSource.length >= 1 ? (
                            <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                                <a>Delete</a>
                            </Popconfirm>
                        ) : null,

                }
            ],
            // 内容值
            dataSource: [
                {
                    name: "HUAWEI Mate 30 Pro 5G",
                    price: 1888,
                    count: 1,
                    key: "1"
                },
                {
                    name: "荣耀V30 5G",
                    price: 1888,
                    count: 1,
                    key: "2"
                },
                {
                    name: "HUAWEI Mate 30 5G",
                    price: 1888,
                    count: 1,
                    key: "3"
                },
                {
                    name: "荣耀V30 Pro 5G",
                    price: 1888,
                    count: 1,
                    key: "4"
                },
                {
                    name: "HUAWEI nova 6 5G",
                    price: 1888,
                    count: 1,
                    key: "5"
                },
                {
                    name: "HUAWEI nova 5z",
                    price: 1888,
                    count: 1,
                    key: "6"
                },
                {
                    name: "HUAWEI Mate X 5G",
                    price: 1888,
                    count: 1,
                    key: "7"
                },
                {
                    name: "荣耀9X",
                    price: 1888,
                    count: 1,
                    key: "8"
                },
                {
                    name: "荣耀20S",
                    price: 1888,
                    count: 1,
                    key: "9"
                },
                {
                    name: "荣耀20S",
                    price: 1888,
                    count: 1,
                    key: "10"
                }
            ]
        }
    }
    render() {
        return (
            <div>
                <Table columns={this.state.columns} dataSource={this.state.dataSource}
                    pagination={{ pageSize: 5 }} />;
            </div>
        )
    }
    handleDelete = key => {
        const dataSource = [...this.state.dataSource];
        this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
      };
    // componentDidMount(){
    //     // axios.get('./data.json').then((res)=>{
    //     //     console.log(res.data.items);
    //     //     this.setState({
    //     //         dataSource:res.data.items
    //     //     })
    //     // }).catch((err)=>{
    //     //     console.log(err);
    //     // })
    // }

}

export default Tablebox;
